<template>
    <van-cell-group style="margin-bottom: 50px">
        <van-cell :title="item.name"
                  center
                  :label="item.author"
                  v-for="(item, index) in musicList"
                  :key="index"
                  @click="checkMusic(item, index)">
            <van-icon :name="item.isPlay ? 'pause-circle-o' : 'play-circle-o'"
                      style="line-height: inherit;"
            />
        </van-cell>
    </van-cell-group>
</template>

<script>
    import axios from '../http/axios'
    import {mapState} from "vuex";

    export default {
        name: "MusicList",
        props: {
            musicList: Array
        },
        data() {
            return {
                currentPlayIndex: -1,
            }
        },
        watch: {
            musicList() {
                this.musicList.forEach(item => {
                    const name = this.formatMusicName(item.name);
                    item.name = name[1];
                    item.author = name[0];
                })
            }
        },
        computed: {
            ...mapState({
                musicPlayer: 'musicPlayer'
            })
        },
        methods: {
            // 选择音乐
            checkMusic(music, i) {
                this.musicList.forEach((item, index) => {
                    item.isPlay = false;
                    if (index === i && this.currentPlayIndex !== i) {
                        item.isPlay = true;
                    }
                });
                if (this.currentPlayIndex === i) {
                    this.currentPlayIndex = -1;
                    this.musicPlayer.pause();
                    return;
                }
                this.currentPlayIndex = i;
                this.musicPlayer.audio = music;
                this.musicPlayer.setSrc(music.url);
                this.$nextTick(() => {
                    this.musicPlayer.play();
                })

                this.getCurrentKrc(music.name + music.author);
            },
            // 获取当前歌曲的歌词信息
            getCurrentKrc(name) {
                this.$store.commit('updateCurrentKrc', []);
                axios.get('/api/krc/' + name)
                    .then(res => {
                        const data = res.data.data.data.lyrics.split('\n');
                        const lyric = this.formatKrc(data.slice(10, data.length - 1));
                        this.$store.commit('updateCurrentKrc', lyric);
                        this.musicPlayer.img = res.data.data.data.img;
                        // this.musicPlayer.lyric = lyric;
                    })
            },
            // 格式化歌词
            formatKrc(k) {
                if (!k.length || !k[0]) return;
                return k.map(item => {
                    if (!item) return;
                    const time = item.substring(1, item.indexOf(']'));
                    const timestamp = time.split(':')[0] * 60 + Number(time.split(':')[1]);
                    return {
                        timestamp,
                        content: item.substring(item.indexOf(']') + 1)
                    }
                })
            },
            // 格式化歌曲名和作者
            formatMusicName(name) {
                const index = name.match(/\./).index;
                return this.formatMusicAuthor(name.substring(0, index));
            },
            formatMusicAuthor(name) {
                return name.split('-');
            },
        }
    }
</script>

<style scoped>

</style>
